<script setup lang="ts" name="SlotMachine1">
import img01 from '@/assets/lottery/slotMachine/slotMachine1/1.png'
import img02 from '@/assets/lottery/slotMachine/slotMachine1/2.png'
import img03 from '@/assets/lottery/slotMachine/slotMachine1/3.png'
import img04 from '@/assets/lottery/slotMachine/slotMachine1/4.png'
import img05 from '@/assets/lottery/slotMachine/slotMachine1/5.png'
import img06 from '@/assets/lottery/slotMachine/slotMachine1/6.png'
import img07 from '@/assets/lottery/slotMachine/slotMachine1/7.png'
import img08 from '@/assets/lottery/slotMachine/slotMachine1/8.png'
import img09 from '@/assets/lottery/slotMachine/slotMachine1/9.png'
import img10 from '@/assets/lottery/slotMachine/slotMachine1/10.png'
import { lottery } from '@/api/lottery'
const SlotMachineRef = ref(null)

const initInfo = ref({
  prizes: [
    { borderRadius: 0, imgs: [{ src: img01, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img02, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img03, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img04, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img05, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img06, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img07, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img08, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img09, top: '10%', width: '80%', height: '80%' }] },
    { borderRadius: 0, imgs: [{ src: img10, top: '10%', width: '80%', height: '80%' }] }
  ],
  slots: [
    { direction: 1 },
    { direction: -1 },
    { direction: 1 }
  ],
  defaultConfig: {
    rowSpacing: 4,
    colSpacing: 10
  },
  defaultStyle: {
    background: '#fff'
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  SlotMachineRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: initInfo.value.slots.length }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      SlotMachineRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>老虎机-普通</span>
      </div>
    </template>
    <div class="slot-machine-pane">
      <div class="slot-machine-content">
        <SlotMachine ref="SlotMachineRef" width="15.7813vw" height="4.9vw" :defaultConfig="initInfo.defaultConfig" :defaultStyle="initInfo.defaultStyle" :prizes="initInfo.prizes" :slots="initInfo.slots" @end="endCallback"></SlotMachine>
      </div>
      <div class="slot-machine-start" @click="startCallback"></div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #057748;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.slot-machine-pane {
  position: relative;
  width: 25vw;
  height: 13.6458vw;
  margin: 2.64vw auto 2.74vw;
  overflow: hidden;
  background-image: url('@/assets/lottery/slotMachine/slotMachine1/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .slot-machine-content{
    position: absolute;
    top: 4.8438vw;
    left: 4.68vw;
    width: 15.7813vw;
    height: 4.9vw;
    overflow: hidden;
    border-radius: 4px;

    &::before, &::after{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      content: '';
    }

    &::before{
      box-shadow: 0 0 10px 5px rgba(0,0,0,0.6) inset;
    }

    // &::after{
    //   box-shadow: 0 -10px 10px -10px rgba(0,0,0,0.5) inset;
    // }
  }

  .slot-machine-start{
    position: absolute;
    bottom: 0.8vw;
    left: 8.3vw;
    width: 8.3vw;
    height: 2.08vw;
    cursor: pointer;
  }
}
</style>
